{% extends "base.html" %}
{% block style %}
    <link href="/media/uploadify-new/uploadify.css" type="text/css" rel="stylesheet"/>

{% endblock %}
{% block title %}
    <title>{{ users.username }} article post</title>
{% endblock %}
<body>
{% block detail %}
    <div class="container no-subnav">
    <!-- -->
    <ul class="breadcrumb hide">
        <li class="active">Create Article</li>
    </ul>
    <div class="row">
    <!-- Sidebar -->
    <div class="span3">
        <div class="well box">
            <div class="media box-head profile-head">
                <a class="pull-left" href="#">
                    <img src="/js/img/avatar.jpeg" class="avatar-large"/>
                </a>

                <div class="media-body">
                    <span class="media-heading profile-name"><a href="#">{{ user.username }}</a></span>
                </div>
            </div>
            <div class="profile-stats">
                <table>
                    <tr>
                        <td class="stat"><a href="#"><strong>{{ articleCount }}</strong>Article</a></td>
                        <td class="stat middle"><a href="#"><strong>{{ boradCount }}</strong>Boards</a></td>
                        <td class="stat"><a href="#"><strong>{{ users.userprofile.followers }}</strong>Followers</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="bg" colspan="3">
                            <a class="btn btn-block">Settings</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="well box-fit">
            <ul class="nav nav-list">
                <li class="nav-header">Article</li>
                <li class="active"><a href="/articleIndex/">Create</a></li>
                <li><a href="#">List</a></li>
                <li class="nav-header">Board</li>
                <li><a href="#">Apply</a></li>
                <li><a href="#">List</a></li>
                <li class="nav-header">AD</li>
                <li><a href="#">Create</a></li>
                <li><a href="#">List</a></li>
            </ul>
        </div>
    </div>
    <!-- Body -->
    <div class="span9">
        <div class="well box">
            <ul id="myTab" class="nav nav-pills box-head">
                <li class="active"><a href="#createtext" data-toggle="tab">Text</a></li>
                <li><a href="#createlink" data-toggle="tab">Link</a></li>
            </ul>
            {% if message %}
                <div style="padding: 5px 10px;" id="errorDiv"><p
                        style="color: red;text-align: center;font-size: 15px"
                        id="error">{{ message|removetags:"ul li" }}</p></div>
            {% endif %}

            <div id="myTabContent" class="tab-content box-form">
                <div class="tab-pane fade in active " id="createtext">
                    {% if boardName %}
                        <form action="/boardAticleAdd/{{ boardName }}/" method="post" id="textForm">{% csrf_token %}
                    {% else %}
                        <form action="/articleAdd/" method="post" id="textForm">{% csrf_token %}
                    {% endif %}
                    <fieldset>
                        <div class="control-group">
                            <div class="input-append">
                                <input type="text" id="textImgUrl">

                                <div class="btn-group">
                                    <button class="btn" tabindex="-1" id="file_upload_1">Picture</button>
                                    <button class="btn dropdown-toggle" data-toggle="dropdown"
                                            tabindex="-1">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Local File</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Remote Link</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="title">Title</label>

                            <div class="controls" id="textTitleDiv">
                                {{ form.title }}
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="content">Content</label>

                            <div class="controls">
                                {{ form.content }}
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="input-append" id="textTypeDiv">
                                {% if not boardName %}
                                    {{ form.category }}
                                {% else %}
                                    <input type="text" id="id_category" name="category" readonly="readonly"
                                           value="{{ boardName }}"/>
                                {% endif %}

                                <div class="btn-group">
                                    <button class="btn" tabindex="-1" type="button">Category</button>
                                    <button class="btn dropdown-toggle" data-toggle="dropdown"
                                            tabindex="-1" type="button">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        {% if category %}
                                            {% for ca in category %}
                                                <li><a onclick="chooseCategory('textForm',this);"
                                                       style="cursor: pointer;">{{ ca.name }}</a></li>
                                            {% endfor %}
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="form-actions">
                                <button type="button" class="btn btn-primary" onclick="addTextArticle();">
                                    Submit
                                </button>
                                <button type="button" class="btn btn-primary" onclick="previewArt('link');">
                                    Preview
                                </button>
                            </div>
                        </div>
                    </fieldset>
                    <input type="hidden" name="imgs" id="textImgs" value=""/>
                    </form>
                </div>
                <div class="tab-pane fade" id="createlink">
                    {% if boardName %}
                        <form action="/boardAticleAdd/{{ boardName }}/" method="post" id="linkForm">{% csrf_token %}
                    {% else %}
                        <form action="/articleAdd/" method="post" id="linkForm">{% csrf_token %}
                    {% endif %}
                    <fieldset>
                        <div class="control-group">
                            <div class="input-append">
                                <input type="text">

                                <div class="btn-group">
                                    <button class="btn" tabindex="-1" id="link_file_upload_1">Picture</button>
                                    <button class="btn dropdown-toggle" data-toggle="dropdown"
                                            tabindex="-1">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Local File</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Remote Link</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="title">Title</label>

                            <div class="controls" id="linkTitleDiv">
                                {{ form.title }}
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="link">Link</label>

                            <div class="controls">
                                {{ form.link }}
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="link">Video</label>

                            <div class="controls">
                                {{ form.video }}
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="content">Content</label>

                            <div class="controls">
                                <input type="text" name="content" id="linkContent"
                                       value=""/>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="input-append">
                                {% if not boardName %}
                                    {{ form.category }}
                                {% else %}
                                    <input type="text" id="id_category" name="category" readonly="readonly"
                                           value="{{ boardName }}"/>
                                {% endif %}
                                <div class="btn-group">
                                    <button class="btn" tabindex="-1" type="button">Category</button>
                                    <button class="btn dropdown-toggle" data-toggle="dropdown"
                                            tabindex="-1" type="button">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        {% if category %}
                                            {% for ca in category %}
                                                <li><a onclick="chooseCategory('linkForm',this);"
                                                       style="cursor: pointer;">{{ ca.name }}</a></li>
                                            {% endfor %}
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <div class="form-actions">
                                    <button type="button" class="btn btn-primary" onclick="addLinkArticle();">Submit
                                    </button>
                                    <button type="button" class="btn btn-primary" onclick="previewArt('link');">
                                        Preview
                                    </button>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <input type="hidden" name="imgs" id="linkImgs" value=""/>
                    </form>
                </div>

            </div>
        </div>
    </div>
    </div>

    <!-- Push -->
    <div id="push"></div>
    </div>
    <div style="display: none;">
        <form action="/articlePreview/" method="post" target="_blank" id="reviewForm">
            <input type="hidden" id="title" value="" name="title"/>
            <input type="hidden" id="content" value="" name="content"/>
            <input type="hidden" id="image" value="" name="image"/>
            <input type="hidden" id="type" value="" name="type"/>
            <input type="hidden" id="link" value="" name="link"/>
        </form>
    </div>
{% endblock %}

</body>
{% block js %}
    <script src="/js/assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="/media/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript" src="/media/js/textareas.js"></script>
    <script type="text/javascript" src="/media/uploadify-new/jquery.uploadify.min.js"></script>
    <script type="text/javascript">
        function tabClick() {
            if ($(this).hasClass('activeTab'))
                return;
            $('.hd ul li').removeClass('activeTab');
            $(this).addClass('activeTab');
            var tabId = $(this).attr('tabId');
            $('#content > div').hide();
            $('#' + tabId).show();
        }
        $(document).ready(function () {
            $('.hd ul li').click(tabClick);

            //图片上传text
            $("#file_upload_1").uploadify({
                height: 20,
                css: '',
                swf: '/media/uploadify-new/uploadify.swf',
                uploader: '/upload_script/',
                cancelImage: '/uploadify-new/uploadify-cancel.png',
                buttonClass: 'btn',
                buttonText: 'Picture',
                fileTypeExts: '*.jpg;*.gif',
                fileTypeDesc: '支持格式jpg/gif',
                multi: false,
                auto: true,
                hideButton: 'true',
                width: 66,
                onUploadSuccess: function (file, data, response) {
                    var textImageObj = $("#textImgs");
                    textImageObj.val(data);
                    $("#textImgUrl").val(data);
                },
                onInit: function () {
                    $("#file_upload_1-queue").hide();
                }
            });

            $("#file_upload_2").uploadify({//文章添加图片， 不存数据库
                height: 20,
                swf: '/media/uploadify-new/uploadify.swf',
                uploader: '/upload_script/',
                cancelImage: '/uploadify-new/uploadify-cancel.png',
                buttonClass: 'addImg',
                buttonText: 'upload img',
                multi: true,
                auto: true,
                width: 120,
                onUploadSuccess: function (file, data, response) {
                    var imageHtm = "<img src='{{ url }}media/image/" + data + "'>";
                    //$("#link_fileDiv").html(imageHtm);
                    tinyMCE.execCommand('mceInsertContent', false, imageHtm);
                }
            });

            //图片上传link
            $("#link_file_upload_1").uploadify({
                height: 20,
                swf: '/media/uploadify-new/uploadify.swf',
                uploader: '/upload_script/',
                cancelImage: '/uploadify-new/uploadify-cancel.png',
                buttonClass: 'btn',
                buttonText: 'Picture',
                multi: true,
                auto: true,
                width: 66,
                onUploadSuccess: function (file, data, response) {
                    var linkImageObj = $("#linkImgs");
                    linkImageObj.val(data);
                }
            });
            setTimeout(hideMessage, 2000);
        });
        function hideMessage() {
            $("#errorDiv").hide(1000);
        }
        function addTextArticle() {
            var iframeObj = $(window.frames[0].document);
            var htmls = iframeObj.find("#tinymce").html();
            $("[name=content]").html(htmls);
            $("#textForm").submit();
        }
        function addLinkArticle() {
            var formObj = $("#linkForm");
            formObj.submit();
        }
        function chooseCategory(formName, obj) {
            var caInfo = $(obj).html();
            var formObj = $("#" + formName);
            $(formObj).find("[name=category]").val(caInfo);
        }
        function previewArt(name) {
            if (name == 'text') {
                $("#image").val($("#textImgs").val());
                $("#title").val($("#textTitleDiv input#id_title").val());
                $("#type").val($("#textTypeDiv input#id_category").val());
                var tinymceObj = tinyMCE.getInstanceById("id_content");
                var content = tinymceObj.getContent();
                $("#content").val(content);
            } else if (name == 'link') {
                $("#image").val($("#linkImgs").val());
                $("#title").val($("#linkTitleDiv input#id_title").val());
                $("#type").val($("#linkTypeDiv input#id_category").val());
                $("#link").val($("#id_link").val());
                $("#content").val($("#linkContent").val());
            }
            $("#reviewForm").submit();
        }
    </script>
{% endblock %}
</html>